<template>
	<div class="app-container">
		<div class="flex flex-wrap">
			<div class="flex items-center marginRB10">
				<span class="w-30 text-right">发起人ID：</span>
				<el-input v-model="listQuery.user_id" clearable placeholder="请输入发起人ID" style="width: 220px;"></el-input>
            </div>
			<div class="flex items-center marginRB10">
				<span class="w-30 text-right">派对类型：</span>
				<el-select v-model="listQuery.category_id" value-key="" placeholder="请选择" clearable filterable>
                    <el-option v-for="item in partyCategoryList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
                
            </div>
            <div class="flex items-center marginRB10">
				<span class="w-30 text-right">派对状态：</span>
				<el-select v-model="listQuery.status" value-key="" placeholder="请选择" clearable filterable>
                    <el-option v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
                
            </div>
			<div class="flex items-center marginRB10">
				<span class="w-30 text-right">派对ID：</span>
				<el-input v-model="listQuery.id" clearable placeholder="请输入派对ID" style="width: 220px;"></el-input>
            </div>
            <div class="flex items-center marginRB10">
				<span class="w-30 text-right">发布时间：</span>
				<el-date-picker
                    v-model="start_time"
                    type="datetime"
					value-format="timestamp"
                    placeholder="选择发布时间">
                </el-date-picker>
                
            </div>
			<div class="flex items-center marginRB10">
				<el-button type="primary" size="default" @click="getList();listQuery.page = 1;">查 询</el-button>
				<el-button size="default" @click="handleReset" plain>重 置</el-button>
            </div>
		</div>

		<el-table :data="tableData" border stripe>
			<el-table-column v-for="col in columns"
				:prop="col.property"
				:key="col.id"
				:label="col.label"
				:width="col.width"
				:sortable="col.property === 'created_at'">
				<template slot-scope="scope">
					<span v-if="col.property === 'category_id'">
						<span>{{scope.row['category'].name}}</span>
					</span>
					<span v-else-if="col.property === 'cover'" style="display: block; text-align: center; width: 100%;">
                        <el-image :src="scope.row[col.property]" fit="fill" :lazy="true" class="rounded-2xl text-base">
							<div slot="error" class="image-slot"></div>
						</el-image>
					</span>
                    <span v-else-if="col.property === 'content'">
                        <span class="overflow-ellipsis" :class="scope.row.isEllipsis ? 'textLength' : ''">{{scope.row[col.property]}}</span>
                        <span v-if="scope.row.isEllipsis" @click="scope.row.isEllipsis = !scope.row.isEllipsis" class="text-blue-500 cursor-pointer">展开</span>
                        <span v-if="!scope.row.isEllipsis && scope.row[col.property].length>30" @click="scope.row.isEllipsis = !scope.row.isEllipsis" class="text-blue-500 cursor-pointer">收起</span>
					</span>
                    <span v-else-if="col.property === 'audio'">
						<audio :id="'audio' + scope.$index" :src="scope.row[col.property]" controls class="w-72"></audio>
					</span>
					<span v-else-if="col.property === 'status'">
						<span v-if="scope.row[col.property] === 'end'" class="text-red-400">已结束</span>
						<span v-if="scope.row[col.property] === 'wait'" class="text-green-500">发起中</span>
					</span>
					<span v-else>{{scope.row[col.property]}}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" fixed="right">
				<template slot-scope="scope">
					<el-button @click="handleCheck(scope.row)" type="text" size="small">查看</el-button>
					<el-button @click="handleDelete(scope.row)" type="text" style="color: #f56c6c;" size="small">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<cus-pagination v-show="total>0" :limit.sync="listQuery.perPage" :page.sync="listQuery.page" :total="total" @pagination="getList" />
		

		<!-- 详情 -->
		<el-dialog
			title="详情"
			:visible.sync="detailDialogVisible"
			width="30%"
			@close="handleCloseDialog">
			<div class="flex items-center mb-4">
                <span>派对封面：</span>
                <el-image :src="partyDetail.cover" fit="fill" :lazy="true" class="rounded-2xl h-40 w-40"></el-image>
            </div>
            <div class="flex items-center mb-4">
                <span>派对主题：</span>
                <span>{{partyDetail.title}}</span>
            </div>
            <div class="flex items-center mb-4">
                <span>派对ID：</span>
                <span>{{partyDetail.id}}</span>
            </div>
            <div class="flex items-center mb-4">
                <span>派对详情：</span>
                <span>{{partyDetail.content}}</span>
            </div>
            
            <div class="flex mb-4">
                <div class="flex items-center w-2/4">
                    <span>派对类型：</span>
                    <span>{{partyDetail.category.name}}</span>
                </div>
                <div class="flex items-center w-2/4">
                    <span>参与人数：</span>
                    <span>{{partyDetail.members}}</span>
                </div>
            </div>
            <div class="flex mb-4">
                <div class="flex items-center w-2/4">
                    <span>派对状态：</span>
                    <span v-if="partyDetail.status === 'wait'" class="text-green-500">发起中</span>
					<span v-if="partyDetail.status === 'end'" class="text-red-400">已结束</span>
                </div>
                <div class="flex items-center w-2/4">
                    <span>发布时间：</span>
                    <span>{{partyDetail.created_at}}</span>
                </div>
            </div>
            <div class="flex items-center mb-4">
                <span>发起人：</span>
                <el-image :src="partyDetail.user_head_picture" fit="fill" :lazy="true" class="rounded-full h-40 w-40 mr-4"></el-image>
                <span>{{partyDetail.user_nickname}}</span>
            </div>
            <div class="flex items-center mb-4">
                <span>发起人ID：</span>
                <span>{{partyDetail.user_id}}</span>
            </div>
			
			<span slot="footer">
				<el-button @click="detailDialogVisible = false">返回</el-button>
				<el-button type="danger" @click="handleDelete2">删除</el-button>
                
			</span>
		</el-dialog>
		
		
	</div>
</template>

<script>
import {
	groupParty,
	groupPartyCategory
} from '@/api/groupChat/cityPartyList'
export default {
	name: 'cityPartyList',
	data() {
		return {
			start_time: '',
			partyDetail: {
				category_id: '', //类型id
				cover: '', //封面
				title: '', //标题
				content: '', //内容
				user_id: '', //发起人id
				created_at: '', //发起时间
				status: '', //状态 wait:等待,end:结束
				user_nickname: '', //发起人昵称
				user_head_picture: '', //发起人头像
				members: '',
				category: {
					id: null,
					name: ''
				}
			},
			partyCategoryList: [],
            options: [
				{
					value:  'wait',
					label: '发起中'
				},
				{
					value:  'end',
					label: '已结束'
				}
			],
			detailDialogVisible: false,
			total: 0,
			listQuery: {
				page: 1,
				perPage: 10
			},
			tableData: [],
			columns: [
				{
					id: 1,
					label: '派对封面',
					property: 'cover',
					width: 'auto'
				},
				{
					id: 2,
					label: '派对主题',
					property: 'title',
					width: 'auto'
				},
				{
					id: 3,
					label: '派对ID',
					property: 'id',
					width: '200'
				},
				{
					id: 4,
					label: '派对类型',
					property: 'category_id',
					width: 'auto'
				},
				{
					id: 5,
					label: '派对详情',
					property: 'content',
					width: 'auto'
				},
				{
					id: 6,
					label: '发起人ID',
					property: 'user_id',
					width: 'auto'
				},
				{
					id: 7,
					label: '发布时间',
					property: 'created_at',
					width: 'auto'
				},
				{
					id: 8,
					label: '派对状态',
					property: 'status',
					width: 'auto'
				}
			],
			successInfo: {
				code: '1122',
				name: '',
				password: ''
			},
			party_id: ''
		}
	},
	mounted() {
		this.getList()
		this.groupPartyCategory()
	},
	methods: {
		getList() {
			this.listLoading = true
			for (let key in this.listQuery) {
				this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
			}
			if(this.start_time) {
				this.listQuery.start_time = this.start_time / 1000
			}else {
				this.listQuery.start_time = this.start_time
			}
			groupParty(this.listQuery, 'get').then(({ data }) => {
				data.list.forEach(element => {
					if(element.content.length > 30) {
						element.isEllipsis = true
					}else {
						element.isEllipsis = false
					}
					
				});
				this.tableData = data.list
				this.total = data.meta.total
				this.listLoading = false
				this.confirmBtn = false
			})
		},
		groupPartyCategory() {
			groupPartyCategory().then(({data,code}) => {
				if(code === 200) {
					this.partyCategoryList = data
				}
			})
		},
		handleCheck(row) {
			this.party_id = row.id
			groupParty({
				party_id: this.party_id
			}, 'get').then(({ data }) => {
				this.partyDetail = data
			})
			this.detailDialogVisible = true
		},
        handleDelete(row) {
            this.$confirm('<p style="font-size: 16px;"><span class="el-icon-question" style="padding-right: 5px;color: #FF9900;font-size: 16px;"></span>确定删除？<p style="color: #606266;font-size: 14px;margin-left: 20px;">是否删除该条派对信息？</p></p>', '', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                showClose: false,
                dangerouslyUseHTMLString: true
            }).then(() => {
                
				if(row.id) {
					this.party_id = row.id
				}
                groupParty({
					party_id: this.party_id
				}, 'delete').then(({ data }) => {
					if(res.code === 200) {
						this.$message({
							type: 'success',
							message: '操作成功'
						})
						this.getList()
						this.detailDialogVisible = false
					}else{
						this.$message({
							type: 'error',
							message: '操作失败'
						})
					}
				})
            })
            .catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                })
            })
        },
		
		handleReset() {
			this.listQuery = {
				page: 1,
				perPage: 10
			}
			this.start_time = ''
			this.getList()
        },
		handleCloseDialog() {
			this.partyDetail = {
				category_id: '', //类型id
				cover: '', //封面
				title: '', //标题
				content: '', //内容
				user_id: '', //发起人id
				created_at: '', //发起时间
				status: '', //状态 wait:等待,end:结束
				user_nickname: '', //发起人昵称
				user_head_picture: '', //发起人头像
				members: '',
				category: {
					id: null,
					name: ''
				}
			}
		},
        handleAvatarSuccess(res, file) {
			console.log(file)
			this.imageUrl = URL.createObjectURL(file.raw)
		},
		beforeAvatarUpload(file) {
			const isJPG = file.type === 'image/jpeg';
			const isLt2M = file.size / 1024 / 1024 < 2;
			console.log(file)
		},
        handleDelete2() {
            
        }
	},
}
</script>

<style lang="scss" scoped>
.textLength{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /*3表示只显示3行*/
    /* autoprefixer: off */ 
    -webkit-box-orient: vertical;
}
</style>